{% load wagtailadmin_tags i18n %}
<div class="tab-nav merged">
    <ul data-tab-nav role="tablist" data-current-tab="{{ self.children.0.heading|cautious_slugify }}">
        {% for child in self.children %}
            <li class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}" role="tab" aria-controls="tab-{{ child.heading|cautious_slugify }}">
                <a href="#tab-{{ child.heading|cautious_slugify }}" class="{% if forloop.first %}active{% endif %}" data-tab="{{ child.heading|cautious_slugify }}">{{ child.heading }}</a>
            </li>
        {% endfor %}
    </ul>
    {% if self.show_comments_toggle %}
        {% with comments_number=self.form.formsets.comments|length %}
            <div class="right wide">
                <div class="comments-controls">
                    <label class="comments-toggle" aria-label="{% trans 'Show comments' %}">
                        <span class="comments-toggle__label">{% trans "Comments" %}</span>
                        <div class="comments-toggle__icon-wrapper">
                            <input type="checkbox" {% if comments_number %}checked{% endif %}>
                            {% icon name="comment" class_name="comments-toggle__icon" %}
                            <div class="comments-toggle__count">{# populated in page-editor.js #}</div>
                        </div>
                    </label>

                    <button class="comment-notifications-toggle-button" type="button">
                        <span class="visuallyhidden">{% trans "Toggle visibility of comment notifications dropdown" %}</span>
                        {% icon name="chevron-down" class_name="comment-notifications-toggle-button__icon" %}
                    </button>

                    <div class="comment-notifications-dropdown">
                        <p class="comment-notifications-dropdown__title">{% trans "Commenting on this page" %}</p>
                        <div class="comment-notifications-toggle">
                            <label class="switch switch--teal-background">
                                {% trans "Comment notifications" %}
                                {{ self.form.comment_notifications }}
                                <span class="switch__toggle"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        {% endwith %}
    {% endif %}
</div>

<div class="tab-content">
    {% for child in self.children %}
        <section id="tab-{{ child.heading|cautious_slugify }}" class="{{ child.classes|join:" " }} {% if forloop.first %}active{% endif %}" role="tabpanel" aria-labelledby="tab-label-{{ child.heading|cautious_slugify }}" data-tab="{{ child.heading|cautious_slugify }}">
            {{ child.render_as_object }}
        </section>
    {% endfor %}
</div>
